<template>
<div id="user">
  <el-form ref="form" :rules="rules" :model="user" label-width="80px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="账号" prop="account">
          <el-input v-model="user.account" :disabled="true"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="user.nickName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="user.contact"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="部门" prop="department">
          <el-input v-model="user.department"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="update">更新</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-table class="good-list" :data="goodsList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item v-if="props.row.photoUrls" style="width:100%;">
            <el-image style="width: 100px; height: 100px" v-for="url in props.row.photoUrls" :key="url" :src="url" :preview-src-list="props.row.photoUrls">
            </el-image>
          </el-form-item>
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="发布人">
            <span>{{ props.row.belonger }}</span>
          </el-form-item>
          <el-form-item label="联系方式">
            <span>{{ props.row.contact }}</span>
          </el-form-item>
          <el-form-item label="原价">
            <span>{{ props.row.originalPrice }}</span>
          </el-form-item>
          <el-form-item label="现价">
            <span>{{ props.row.price }}</span>
          </el-form-item>
          <el-form-item label="购买时间">
            <span>{{ props.row.buyTime | timestamp('yyyy-MM')}}</span>
          </el-form-item>
          <el-form-item label="分类">
            <span>{{ props.row.classify | classify(classifyList)}}</span>
          </el-form-item>
          <el-form-item label="发布时间">
            <span>{{ props.row.createTime | timestamp('yyyy-MM-dd hh:mm')}}</span>
          </el-form-item>
          <el-form-item label="描述" style="width:100%;">
            <span>{{ props.row.desc}}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="name">
      <template slot-scope="scope">
        <el-badge :value="'结束'" class="item" v-if="scope.row.state=='1'">
          <span>{{ scope.row.name }}</span>
        </el-badge>
        <el-badge :value="'删除'" class="item" v-if="scope.row.state=='-1'">
          <span>{{ scope.row.name }}</span>
        </el-badge>
        <span v-if="scope.row.state!='1'&&scope.row.state!='-1'">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="价格" prop="price"></el-table-column>
    <el-table-column label="发布人" prop="belonger"></el-table-column>
    <el-table-column label="描述" prop="desc"></el-table-column>
    <el-table-column align="right">
      <template slot="header" slot-scope="scope">
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="completion(scope.row)" v-if="scope.row.state!='1' && scope.row.state!='-1'">完成交易</el-button>
        <el-button size="mini" type="danger" @click="deleteGoods(scope.row)" v-if="scope.row.state!='-1'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import http from '@/components/service/http.js'

export default {
  name: 'user',
  data() {
    return {
      search:'',
      user: {},
      goodsList: [],
      rules: {}
    }
  },
  created() {
    this.getCurrentUser();
    this.getGoodsListByUser();
  },
  methods: {
    getCurrentUser: function () {
      var This = this;
      http.get('/shs/user/getInfo')
        .then(function (response) {
          This.user = response.data;
        })
    },
    getGoodsListByUser: function () {
      var This = this;
      http.get('/shs/goods/getListByUser')
        .then(function (response) {
          This.goodsList = response.data;
          _.forEach(This.goodsList, function (goods) {
            if (goods.photoIds) {
              goods.photoUrls = [];
              _.forEach(goods.photoIds, function (photoId) {
                goods.photoUrls.push('/shs/photo/find/' + photoId)
              })
            }
          })
        })
    },
    update: function () {
      var This = this;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          http.post('/shs/user/update', This.user)
            .then(function () {
              This.$message({
                showClose: false,
                message: "更新成功",
                type: "success",
                duration: 3000,
                center: true
              });
            })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style>
#user {
  margin-top: 20px;
  width: 100%;
}

#user .el-date-editor.el-input {
  width: 100%;
}

#user .el-cascader {
  width: 100%;
}

#user .good-list .el-aside {
  width: 200px !important;
  float: left;
}

#user .good-list .el-main {
  width: calc(100% - 200px);
  float: right;
  padding-top: 0;
}

#user .good-list label {
  width: 90px;
  color: #99a9bf;
}

#user .good-list .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

#user .good-list .goods-photo {
  width: 90%;
  height: 200px;
  margin: 20px 0;
}

#user .el-table .cell {
  overflow: unset !important;
}
</style>
